<template>
	<view class="pages">
		<view class="top">
			<view class="status_bar"></view>
			<view class="title">
				<view  class="left">
					<image class="left" @click="goapge('/pages/other/masslist')" src="../../static/cut/2222.png" mode=""></image>
					<text v-if="unread_msg_count">{{unread_msg_count}}</text>
				</view>
				<image class="right" @click="sign" src="../../static/cut/1111.png" mode=""></image>
			</view>
		</view>
		<!-- <view class="top">
			<view class="status_bar"></view>
			<view class="title">
				<view class="left">
					<image class="left" src="../../static/1509161490928274.jpg" mode=""></image>
					<text>1</text>
				</view>
				<image class="right" src="../../static/1509161490928274.jpg" mode=""></image>
			</view>
		</view> -->
		<image class="huotouquan" src="/static/cut/9999.png" mode=""></image>
		<view class="inputss">
			<input type="text" v-model="keyword" />
			<image src="/static/zixun/3.png" @click="search"></image>
		</view>
		<view class="tab">
			<view v-for="(item,index) in cates" :key="index" @click="getTooList(item)" :class="{active: activeCateId == item.id}">
				{{item.name}}
				<view class="line"></view>
			</view>
		</view>
		
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower">
			<view class="row">
				<view class="list" v-for="(item,index) in newlist" :key="item.id" @click="goDetail(item)">
					<image :src="baseURL+item.pic_utl" mode=""></image>
					<view class="newCont">
						<view class="newTitle">{{item.title}}</view>
						<view class="newD">{{item.title}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 弹窗 -->
		<view class="cgts" v-if="showSuccess">
			<view>
				<uni-icons :type="'close'" :size="'30'" @click="showSuccess=false"></uni-icons>
				<text>您现在不能查看，需要提升会员等级或者单独购买！</text>
				<view class="buts">
					<button type="primary" @click="pay">￥{{price}}</button>
					<button type="primary" @click="chargeVip">提升会员</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniIcons
		},
		onShow() {
			// #ifdef APP-PLUS
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				if(icon){icon.show();}
			}, 100);
			// #endif
			this.getConversation();
			var _this = this;
			_this.$appjs.jim.onMsgReceive(function(data) {
				uni.vibrateLong();
				
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = '/static/thebell/dingding.mp3';
				innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
				_this.getConversation();
			});
		},
		onHide() {
			
		},
		data() {
			return {
				baseURL:this.$API.baseURL,
				unread_msg_count:0,//用户现在未读消息的条数
				cates: [],
				keyword: '',
				activeCateId:'',
				newlist:[],
				page: 1,
				rows: 10,
				showSuccess:false,//支付弹窗
				price:'',//给钱看要的价格
				newsid:'',//给钱看要的id
			}
		},
		onLoad() {
			this.getTooList();
			this.toolCartCateList();
		},
		methods: {
			//获取会话列表  --- 获取消息的条数
			getConversation(){
				var _this = this;
				_this.$appjs.jim.getConversation().onSuccess(function(data) {
					_this.unread_msg_count = 0;
					data.conversations.forEach(function(v,i){
						_this.unread_msg_count = _this.unread_msg_count + v.unread_msg_count 
					})
					if(_this.unread_msg_count>99){
						_this.unread_msg_count = 99 + '+'
					}
				})
			},
			//立即购买文章
			pay() {//获取支付信息
				let _this = this;
					uni.request({
						url: this.$API.wxpay,
						method:"GET",
						data: {
							pay_price: parseInt(this.price * 100),
						},
						success: (result) => {
							var orderInfo = result;
							if (orderInfo.statusCode != 200) {
								uni.showModal({
									content: "获得订单信息失败",
									showCancel: false
								})
								return;
							}
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: orderInfo.data,
								success: (e) => {
									uni.showModal({
										content: "支付成功",
										showCancel: false,
										success() {
											_this.buyNews();
										}
									});
									
								},
								fail: (e) => {
									uni.showModal({
										content: "支付失败",
										showCancel: false
									})
								},
								complete: () => {
									
								}
							})
						},
						fail: (e) => {
							// res(result)
						}
					})
			},
			//支付之后录入
			buyNews(){
				var _this = this;
				uni.request({
					url:this.$API.isBuy,
					method:"GET",
					data:{
						userid:uni.getStorageSync("userid"),
						newsid:this.newsid,
						type:'news'
					},
					header:this.$API.get_head(),
					success: (res) => {
						if(res.data){
							_this.showSuccess = false;
							// uni.navigateTo({
							// 	url: '/pages/news/list2detail-detail?data=' + e
							// })
						}else{
							_this.showSuccess = true;
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},			
			//跳转到购买会员
			chargeVip(){
				uni.navigateTo({
					url:"/pages/newpages/vip"
				})
			},
			//跳转详情页面
			goDetail(e) {
				console.log(e)
				this.price = e.price;
				this.newsid = e.id;
				var _this = this;
				if(uni.getStorageSync("vip_status") < e.need_vip){
					//检查是否购买了该文章
					uni.request({
						url:this.$API.isBuy,
						method:"GET",
						data:{
							userid:uni.getStorageSync("userid"),
							newsid:_this.newsid,
							type:'news'
						},
						header:this.$API.get_head(),
						success: (res) => {
							if(res.data){
								_this.showSuccess = false;
								uni.navigateTo({
									url: '/pages/toolLibrary/gongjukuDetail?data=' + _this.newsid
								})
							}else{
								_this.showSuccess = true;
							}
						},
						fail: () => {
							uni.showToast({
								title:"加载失败",
								icon:'none'
							})
						}
					})
					return false;
				}
				uni.navigateTo({
					url: '/pages/toolLibrary/gongjukuDetail?data=' + _this.newsid
				})
			},
			//列表到顶
			upper: function(e) {
			    console.log(e,'upper')
			},
			//列表到底
			lower: function(e) {
				this.page++;
				this.getTooList()
			},
			//点击搜索图片
			search(){
				this.page=1;
				this.rows=10;
				this.newlist=[];
				this.getTooList();
			},
			// 工具库分类列表A
			toolCartCateList(){
				var _this = this;
				uni.request({
					url: _this.$API.toolCartCateList,
					method: "GET",
					header: _this.$API.get_head(),
					success: (res) => {
						_this.cates = res.data.rows;
					},
					fail: () => {
						uni.showToast({
							title: "加载失败",
							icon: 'none'
						})
					}
				})
			},
			//获取工具列表
			getTooList(cate) {
				let _this = this;
				if(cate){
					_this.page = 1;
					_this.activeCateId = cate.id == _this.activeCateId ? '' : cate.id;
				}
				
				// 异步请求
				uni.showLoading({title:'加载中'});
				uni.request({
					url: _this.$API.toolsList,
					method: "GET",
					data: {
						page: _this.page,
						rows: _this.rows,
						sort : "is_top desc,publish_time",
						order : "desc",
						where: {
							title: _this.keyword,
							cat_id: _this.activeCateId,
							status:1
						}
					},
					header: this.$API.get_head(),
					success: (res) => {
						uni.hideLoading();
						if(_this.page > 1)
							_this.newlist = _this.newlist.concat(res.data.rows);
						else
							_this.newlist = res.data.rows;
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: "加载失败",
							icon: 'none'
						})
					}
				})
			},
			goapge(e){
				uni.navigateTo({
					url:e,
				})
			},
			sign(){
				uni.navigateTo({
					url:"/pages/newpages/qiandao"
				})
			},
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		color: #fff;
		background-color: #007AFF;
	}

	.title {
		height: 67upx;
		text-align: center;
		font-size: 36upx;
		line-height: 67upx;
		color: #333333;
		position: relative;
	}

	.top {
		width: 100%;
		background: #007AFF;
	}

	.title .left {
		position: absolute;
		left: 20upx;
		top: 0;
	}

	.title .left image {
		width: 42upx;
		height: 37upx;
	}

	.title .left text {
		display: inline-block;
		width: 10upx;
		height: 10upx;
		border-radius: 50%;
		position: absolute;
		right: 0upx;
		top: 0upx;
		background: red;
	}

	.title .right {
		position: absolute;
		right: 20upx;
		top: 0;
		width: 39upx;
		height: 39upx;
	}
	.title .left{position:absolute;left:20upx;top:0;}
	.title .left image{width:42upx;height:37upx;}
	.title .left text{
		display: inline-block;
		width: 25upx;
		height: 25upx;
		border-radius: 50%;
		position: absolute;
		left: 50upx;
		top: -9upx;
		background: red;
		font-size: 15upx;
		color: #fff;
		line-height: 25upx;
		text-align: center;
	}
	.title .right{position:absolute;right:20upx;top:0;width:39upx;height:39upx;}

	.huotouquan {
		height: 112upx;
		width: 112upx;
		display: block;
		margin: 50upx auto 20px;
	}

	.inputss {
		width: 560upx;
		position: relative;
		margin: 0 auto;
	}

	.inputss input {
		width: 480rpx;
		border: 1rpx solid #5c9cf0;
		height: 65rpx;
		padding: 0 50rpx 0 20rpx;
	}

	.inputss image {
		width: 30upx;
		height: 30upx;
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.tab {
		display: flex;
		justify-content: center;
		padding: 20upx;
		flex-wrap: wrap
	}

	.tab>view {
		margin-right: 20upx;
		text-align: center;
		min-width: 112upx;
	}

	.tab>view:last-child {
		margin-right: 0;
	}

	.tab>view .line {
		width: 40upx;
		height: 10upx;
		background: #dcdcdc;
		margin: 0 auto;
		border-radius: 10px;
	}

	.tab>.active .line {
		width: 40upx;
		height: 10upx;
		background: #2892ff;
	}

	.row {
		margin: 0 15upx;
		height:668upx;
	}

	.row>.list {
		display: flex;
		padding: 30upx 25upx;
		border-bottom: 1upx #ededed solid;
	}

	.row>.list>image {
		width: 161upx;
		height: 101upx;
		margin-right: 30upx;
	}

	.newTitle {
		width: 420upx;
		color: #313131;
		font-size: 28upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: 700;
		
	}

	.newD {
		width: 420upx;
		color: #707070;
		font-size:24upx;
		line-height:1.2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	/*弹窗*/
		.cgts{
			width: 100%;
			height: 100%;
			background: #007AFF;
			position: fixed;
			top:0;
			background: rgba(0,0,0,.5);
			z-index:999;
		}
		.cgts>view{
			width: 460upx;
			height: 320upx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-radius:10upx;
			background: #fff;
			box-sizing: border-box;
			padding:70upx 38upx;
			position:relative;
		}
		.cgts .uni-icon.uni-icon-close{
			position: absolute;
			right:20upx;
			top:20upx;
		}
		.cgts text{
			font-size:30upx;
			font-family:Microsoft YaHei;
			font-weight:bold;
			text-align: center;
			display: block;
			width: 100%;
			margin-bottom: 45upx;
			color:rgba(66,66,66,1);
		}
		.cgts .buts{
			display: flex;
			justify-content: space-around ;
		}
		.cgts .buts button{
			width:170upx;
			font-size:28upx;
			display: inline-block;
		}
		.cgts .buts button:first-child{
			background-color:transparent;
			border:none;
			color: #D81E06;
		}
</style>
